<template>
    <div class="research app-wrapper">
        <div class="research-head">
            <div class="research-head-form">
                <div class="research-form-item">
                    <div class="research-input-field" v-focus v-blur ref="inputField">
                        <i class="van-icon van-icon-search"></i>
                        <input type="text" class="input-text" placeholder="请输入频道名称"
                            @focus="inputFocus"
                            @blur="inputBlur"
                        >
                    </div>
                    <button type="button" class="button button-search" ref="searchButton">搜索</button>
                </div>  
            </div>
            <div class="research-navs">
                <ul>
                    <li
                        :class="{'active': activeTab === 'lives'}"
                        @click.stop="switchTab('lives')"
                    >
                        <span>话题</span>
                    </li>
                    <li
                        :class="{'active': activeTab === 'channels'}"
                        @click.stop="switchTab('channels')"
                    >
                        <span>频道</span>
                    </li>
                    <li
                        :class="{'active': activeTab === 'videos'}"
                        @click.stop="switchTab('videos')"
                    >
                        <span>小视频</span>
                    </li>
                </ul>
            </div>
        </div>
        <!-- /research-head -->
        <div class="research-body">
            <ul class="topic-list" v-if="activeTab === 'lives'">
                <TopicItem
                    v-for="item in lives"  
                    :topic="item" 
                    :key="item.id"
                    href="/channel"
                ></TopicItem>
            </ul>

            <ul class="channel-list" v-if="activeTab === 'channels'">
                <ChannelItem 
                    v-for="item in channels"
                    :key="item.id"
                    :channel="item"
                    href="/channel"
                ></ChannelItem>
            </ul>

            <ul class="video-list" v-if="activeTab === 'videos'">
                <SmallVideo
                    v-for="item in videos"
                    :video="item"
                    :key="item.id"
                    isCtrl="false"
                ></SmallVideo>
            </ul>

        </div>
    </div>
</template>

<script>
import TopicItem from '@/components/TopicItem';
import ChannelItem from '@/components/ChannelItem';
import SmallVideo from '@/components/SmallVideo';
import { getCateLives } from '@/api';

export default {
    components: {
        TopicItem,
        ChannelItem,
        SmallVideo 
    },
    props: {},
    data() {
        return {
            activeTab: 'lives',
            keyword: '',
            lives: [],
            channels: [],
            videos: [],
        };
    },
    created() {
        if(this.activeTab === 'lives'){
            getCateLives().then((response)=>{
                let result = response.data.lives;
                console.log(response)
                this.lives = result.data;
            });
        }
    },
    mounted() {},
    computed: {},
    methods: {
        switchTab(tabName){
            this.activeTab = tabName;
            if(this.activeTab === 'lives'){
                getCateLives().then((response)=>{
                    let result = response.data.lives;
                    console.log(response)
                    this.lives = result.data;
                });
            }
        },
        inputFocus(){
            this.$refs.inputField.style.width = '80%';
            this.$refs.searchButton.style.display = 'inline-block';
        },
        inputBlur(){
            this.$refs.inputField.style.width = '100%';
            this.$refs.searchButton.style.display = 'none';
        },
    },

};
</script>
<style lang="scss" scoped>
.research {
    background: #fff;
}

.research-head {
    position: fixed;
    width: 100%;
    height: 230px;
}
.research-form-item {
    display: flex;
    padding: 24px;
    font-size: 0;
    position: relative;
  
    .research-input-field {
        width: 100%;
        > .van-icon {
            position: absolute;
            top: 50%;
            left: 48px;
            font-size: 42px;
            color: #353535;
            transform: translate(0, -50%);
        }
    }


    .input-text{
        width: 100%;
        height: 72px;
        padding-left: 72px;
        font-size: 28px;
        line-height: 72px;
        color: #353535;
        background-color: #f3f3f3;
        border-radius: 36px;
    }

    .button-search {
        flex: 1;
        display: none;
        font-size: 32px;
        color: #0084ff;
        text-align: center;
        background: none;
    }
}

.research-navs {
    margin: 0 36px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0;
    position: relative;
    ul { display: flex; }
    li {
        flex: 1;
        justify-content: center;
        text-align: center;
        span {
            display: inline-block;
            height: 108px;
            position: relative;
            font-size: 28px;
            line-height: 108px;
        }

        &.active {
            color: #d21f2b;
            span {
              &:after{
                  content: '';
                  display: block;
                  width: 100%;
                  height: 4px;
                  position: absolute;
                  left: 0;
                  bottom: 0;
                  background-color:#d21f2b;
              }  
            }
        }
    }
}

.research-body {
    height: calc(100% - 230px);
    margin-top: 230px;
}
</style>